<script setup lang="ts">
import {onMounted, ref} from "vue";
import { useRoute } from 'vue-router';
import { getTeacherDetail} from "@/api/teacher/http";
import {showToast} from "vant";
import { useRouter } from 'vue-router';
const router = useRouter();
let checked = ref(false);
let route = useRoute();
let teacherDatail = ref({})
getTeacherDetail(route.query.id).then((res)=>{
    if (res.code === 200){
        teacherDatail.value = res.data
    }
})
const numberArticles = (num) => {
    if (num === '0'){
        showToast('暂无文章');
    }else {
        router.push({path:'/articleList'})
    }
}
let url = 'http://192.168.5.120:8090'
</script>

<template>
<div class="teacher-detail-container">
    <section class="teacher-detail-top">
        <router-link :to="router.options.history.state.back">
            <van-icon name="arrow-left"/>
        </router-link>
    </section>
    <section class="teacher-detail-body">
        <section class="teacher-background"></section>
        <section class="teacher-info">
            <van-image
                round
                width="4rem"
                height="4rem"
                :src="url + teacherDatail.avatar"
            />
            <div><b>{{teacherDatail.name}}</b></div>
            <div class="label-list">
                <van-space >
                    <van-tag color="#F2F3F4" size="medium" v-for="item in teacherDatail.labels" :key="item.labelId">{{item.label}}</van-tag>
                </van-space>
            </div>
            <div class="articlesNum">
                <span class="article-text">{{teacherDatail.articleNumber}}篇文章</span>
                <span class="arrowhead" @click="numberArticles(teacherDatail.articleNumber)">></span>
            </div>
        </section>
        <section class="detail-info">
            <div class="top-title">
                专业擅长
            </div>
            <div class="bottom-content">
                {{teacherDatail.profession}}
            </div>
        </section>
        <section class="detail-info">
            <div class="top-title">
                办公室位置
            </div>
            <div class="bottom-content">
                {{teacherDatail.location}}
            </div>
        </section>
        <section class="detail-info">
            <div class="top-title">
                办公电话
            </div>
            <div class="bottom-content" style="color: #1590FB">
                {{teacherDatail.phone}}
            </div>
        </section>
        <section class="detail-info">
            <div class="top-title">
                老师介绍
            </div>
            <div class="bottom-content">
                {{teacherDatail.infos}}
            </div>
        </section>
        <section class="detail-info">
            <div class="top-title">
                预约须知
            </div>
            <div class="bottom-content">
                <ul>
                    <li>
                        1、预约后请同学提前候场
                    </li>
                    <li>
                        2、咨询地址和联系方式请到个人中心-我的咨询中进行查看
                    </li>
                    <li>
                        3、如需取消预约请提前24小时进行操作，多次出现爽约的情况将被封禁账号
                    </li>
                    <li>
                        4、咨询结束后及时提交评价反馈
                    </li>
                    <li>
                        5、请学生咨询时带上一卡通，先在楼管处登记再进入
                    </li>
                </ul>
            </div>
        </section>
        <section class="button-box">
            <van-button type="primary">预约咨询</van-button>
        </section>
        <section class="appointment-agreement">
            <van-checkbox v-model="checked" label-disabled shape="square">请阅读<span style="color: #1590FB">《预约协议》</span>,勾选代表已同意</van-checkbox>
        </section>
    </section>
</div>
</template>

<style scoped lang='less'>
.teacher-detail-container {
    background-color: #F8F8F8;
    min-height: 100vh;
    .teacher-detail-top {
        position: fixed;
        width: 100%;
        height: 10vw;
        background-color: #1590FB;
        padding: 10px;
        box-sizing: border-box;
    }
    .teacher-detail-body {
        .teacher-background {
            width: 100%;
            height: 22vw;
            background-color: #1590FB;
        }
        .teacher-info {
            position: relative;
            margin: -12vw auto 0;
            width:95% ;
            height: 34vw;
            background-color: white;
            border-radius: 5px;
            text-align: center;
            /deep/.van-tag {
                color: #6F6F6F;
            }
            /deep/.van-image {
                margin-top: 8px;
                margin-bottom: 5px;
            }
            .label-list {
                margin-top: 5px;
            }
            .articlesNum {
                position: absolute;
                top: 5vw;
                right:0;
                width: 100px;
                height:30px;
                background-color: #F8F4F0;
                border-radius: 30px 0 0 30px;
                color: #DD7814;
                font-weight: bold;
                font-size: 14px;
                line-height: 30px;
                .arrowhead {
                    margin-top: -2px;
                    margin-left: 5px;
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    line-height: 15px;
                    background-color: #DD7814;
                    font-size: 10px;
                    color: wheat;
                    vertical-align:middle;
                    //color: rgba(255, 255, 255, 0.91);
                }
            }
        }
        .detail-info {
            width: 95%;
            margin: 10px auto 10px;
            min-height: 20vw;
            border-radius: 5px;
            background-color: white;
            box-sizing: border-box;

            .top-title {
                width: 100%;
                position: relative;
                color: #333333;
                padding: 10px 15px;
                font-weight: bold;
                height: 50%;
                box-sizing: border-box;
                &::before{
                    content: '';
                    display: block;
                    position: absolute;
                    width: 3px;
                    height: 0.8em;
                    background-color: #419CFD;
                    top: 35%;
                    left: 8px;
                }
                &::after {
                    content: '';
                    display: block;
                    position: absolute;
                    width: 100%;
                    height: 1px;
                    background-color: #F2F3F4;
                    bottom: 0;
                    left: 0;
                }
            }
            .bottom-content {
                height: 50%;
                font-size: 14px;
                padding: 10px 15px;
                color: #333333;
                box-sizing: border-box;
            }
        }
        .button-box {
            margin: auto;
            width: 95%;
            /deep/ .van-button {
                margin: 10px auto 10px;
                width: 100%;
                font-size: 20px;
            }
        }
        .appointment-agreement {
            padding-bottom: 10px;
            /deep/.van-checkbox {
                justify-content: center;
            }
        }

    }
}
</style>